import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  Image,
} from 'react-native';


import CommonViewPagerOne from '../common/CommonViewPagerOne';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import {DateUtils} from '../../utils/Utils';
import CommonStyles from '../../common/CommonStyles';
import Constants from '../../common/Constants';
import Config from '../../config';
import BaseItem from '../common/BaseItem';
import CommonDataListView from '../common/CommonDataListView';
import ToastUtils from '../../common/ToastUtils';
import RequestQuanziPostListAction from '../../actions/quanzi/RequestQuanziPostListAction';
import QuanziPostListItemView from "./QuanziPostListItemView";

export default class QuanziPostListView extends CommonDataListView {
  constructor(props) {
    super(props);
    this.myData = this.props.pageData;
  }

  _onRenderItem(data, index) {
    return (<QuanziPostListItemView isNeedCeck={true} user_id={this.props.pageData1.routeData.userData.user_id} myData={this.props.pageData} data={data} key={index} />);
  }

  componentWillUpdate(nextProps, nextState) {
    super.componentWillUpdate(nextProps, nextState);
    if(this.myData.board_id!==nextProps.pageData.board_id) {
      this.myData = nextProps.pageData;
      this.scrollTo({y:0, animated:false});
      this.doRefresh();
    }
  }
  
  _onPressItem(data) {
    if(this.myData && this.myData.is_favorited != 1){
      ToastUtils.show("请先关注该圈子");
      return;
    }

    data.board_id = this.myData.board_id;
    this.gotoPage(Config.pages.quanzi_post_content,data);
  }

  _requestData(page) {
    // console.log(this.myData)
    new RequestQuanziPostListAction().call(this, {board_id: this.myData.board_id,page:page,page_size:10})
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  render() {
    return (
        <View
          style={{
            paddingTop:SizeUtils.translateDesignHeightToCode(40),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),backgroundColor:"#ffffff",
              marginRight:SizeUtils.translateDesignWidthToCode(40), borderColor:"#eeeeee",
              paddingBottom:SizeUtils.translateDesignHeightToCode(40),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
             <Text numberOfLines={2}
                    style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(32)}]}>
                      {this.props.data.title}
             </Text>
             {this._renderImagesBottom(this.props.data)}
           <View style={{flex:1}} >
             <Text style={{fontSize:SizeUtils.translateFontSizeToCode(22), color:"#999999", paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
              {this._getBottomText()}
             </Text>
           </View>
        </View>

    )
  }
  _renderImagesBottom(data) {
    if(!data.image_urls || data.image_urls.length == 0) {

    }
    else if(data.image_urls.length < 3) {
      return this._renderOneImageBottom(data);
    }
    else if(data.image_urls.length == 3) {
      return (
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(20), flexDirection:"row",
            width:SizeUtils.translateDesignWidthToCode(204 * 3 + 30 * 2), justifyContent:"space-around"}}>
          {this._renderThreeImageBottom(data)}
        </View>
      );
    }
  }
  _renderOneImageBottom(data) {
    return (
      <View style={{marginTop:SizeUtils.translateDesignHeightToCode(20),}}>
        <Image source={{uri:data.image_urls[0]}} style={{width:SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(80), height:SizeUtils.getWindowSize().width*0.5}}
          resizeMode={"cover"} />
      </View>
    )
  }
  _renderThreeImageBottom(data) {
    return data.image_urls.map((url, index) => {
      return <TImage key={index} source={{uri:url}} style={{width:204, height:140}}
        isMini={true} miniSize={"mini200"} resizeMode={"cover"}/>
    })
  }
  _getBottomText(){
    return this.props.data.comments_num +
                " 评论 · 发布时间:" + DateUtils.formatDate2(this.props.data.posted_at);
  }

   _renderCurrentImages() {
    if(this.props.data.image_urls){
        return (
          <View style={{marginTop:SizeUtils.translateDesignHeightToCode(30)}}>
            <TImage source={{uri:this.props.data.image_urls[0]}} style={{width:660, height:360}}
              resizeMode={"contain"}
              />
          </View>
        )

    }else {
      return(<View></View>)
    }
  }

  _renderCurrentImageItem(imageData, index) {
    this._itemRefs = [];
    // console.log("=============", this._itemRefs);
    return (<TImage source={imageData} style={{width:28, height:28}}/>
      )
  }


}
